<template>
  <div>
    <form class="fromvan" action="/">
      <van-search
        background="#3296fa"
        v-model.trim="searchvalue"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="$router.go(-1)"
      />
    </form>
    <!-- 搜索框 -->

    <!-- //搜索结果 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      v-if="searchFlag"
    >
      <search-result :searchresult="searchresult"></search-result>
    </van-list>
    <!-- //搜索结果 -->
    <!-- //搜索建议 -->
    <search-suggest
      @changsuggest="changsuggest"
      :searchvalue="searchvalue"
      :suggestData="suggestData"
      v-else-if="searchvalue"
    ></search-suggest>
    <!-- //搜索建议 -->

    <!-- //搜索历史 -->
    <search-history
      @deloncehistory="deloncehistory"
      @delhistory="delhistory"
      :historyData="historyData"
      v-else
    ></search-history>
    <!-- //搜索历史 -->
  </div>
</template>

<script>
import { setItem, getItem, removeItem } from "@/utils/storage.js";
import searchHistory from "./components/search-history.vue";
import searchResult from "./components/search-result.vue";
import searchSuggest from "./components/search-suggest.vue";
import { getSearchSuggestionsApi, getsearchresultApi } from "@/api";
import { debounce } from "lodash";

export default {
  components: {
    searchHistory,
    searchResult,
    searchSuggest
  },
  data() {
    return {
      searchvalue: "",
      searchFlag: false,
      historyData: getItem("historyData") || [], //初次进入需要从本地获取,
      suggestData: [],
      searchresult: [],
      //  上拉加载组件  属性
      page: 1,
      per_page: 10,
      loading: false, //  实现上拉加载的效果
      finished: false // true就是不在触发上拉组件
    };
  },
  methods: {
    onSearch(val) {
      this.searchFlag = true;

      //搜索历史数据持久化
      // 本地存储每次输入的value值
      this.historyData.push(this.searchvalue);
      setItem("historyData", this.historyData);
    },
    //子组件传过来的事件  全部删除  搜索历史
    delhistory() {
      // 删除本地
      removeItem("historyData");
      //删除列表
      this.historyData = [];
    },
    //子组件传过来的事件  删除单个 根据索引   搜索历史
    //接收一个状态this.delshow false===点击后显示搜索结果   true====删除
    deloncehistory(index, item, delshow) {
      if (delshow) {
        //删除列表
        this.historyData.splice(index, 1);
        // 删除本地 给本地重新赋值
        setItem("historyData", this.historyData);
      } else {
        //false===点击后显示搜索结果
        //点击搜索历史中的某一项 就把这一项的值赋值给输入框
        this.searchFlag = true;
        this.searchvalue = item;
      }
    },
    //获取搜索建议 请求
    async getSearch() {
      if (!this.searchvalue) return;
      const res = await getSearchSuggestionsApi(this.searchvalue);
      // console.log(res, 77777777);
      this.suggestData = res.data.data.options;
      // console.log(this.suggestData, 77777777);
    },
    //点击 获取搜索结果
    changsuggest(item) {
      console.log(77777777);
      //点击搜索建议中的某一项 就把这一项的值赋值给输入框
      this.searchFlag = true;
      this.searchvalue = item;

      this.getsearchresult();
    },
    //获取搜索结果

    async getsearchresult() {
      const res = await getsearchresultApi({
        page: this.page,
        per_page: this.per_page,
        q: this.searchvalue
      });
      this.searchresult = [...this.searchresult, ...res.data.data.results];
      // console.log(this.searchresult, 77777777);
      // 加载状态结束
      this.loading = false;
      //判断数组中的长度
      if (res.data.data.results.length) {
        //  还可以继续获取数据  还可以继续上拉
      } else {
        // 数据全部加载完成
        this.finished = true;
      }
    },
    onLoad() {
      this.getsearchresult();
    }
  },
  watch: {
    searchvalue: {
      handler: debounce(function(searchvalue) {
        this.getSearch();
      }, 500),
      immediate: true //值只要发生改变就立刻执行回调
    }
  }
};
</script>
<style scoped lang="less">
.fromvan {
  width: 100%;
  position: fixed;
  z-index: 99;
}
.search-history {
  padding-top: 120px;
}
.van-search__action {
  color: #fff;
}
</style>
